<template>
  <div>
      <el-form
        :model="addForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        autocomplete="off"
      >
        <el-form-item label="手机号" prop="mobile" style="width: 430px">
          <el-input
            clearable
            placeholder="请输入手机号"
            oninput="value=value.replace(/[^\d]/g,'')"
            @blur="addForm.mobile = $event.target.value"
            v-model="addForm.mobile"
            disabled
            maxlength="11"
          >
          </el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="smsCode" style="width: 430px">
          <div style="position: relative">
            <el-input
              placeholder="请输入短信验证码"
              maxlength="6"
              v-model.trim="addForm.smsCode"
            >
            </el-input>
            <div @click="smsCodeClick" class="code">
              <span v-show="showCountDown">获取验证码</span>
              <span v-show="!showCountDown">{{ countDown }}秒重新获取</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          size="medium"
          label="新密码"
          prop="passWord"
          style="width: 430px"
        >
          <el-input
            class="input_240"
            autocomplete="off"
            type="password"
            show-password
            clearable
            v-model="addForm.passWord"
            placeholder="请输入"
            readOnly
            @focus="onFocus"
            @blur="onBlur"
            @input.native="onInput($event, addForm.passWord)"
            @mousedown.native="onMousedown"
            maxlength="16"
          ></el-input>
        </el-form-item>
        <el-form-item
          size="medium"
          label="确认密码"
          prop="verifyPassWord"
          style="width: 430px"
        >
          <el-input
            class="input_240"
            autocomplete="off"
            type="password"
            show-password
            clearable
            v-model="addForm.verifyPassWord"
            placeholder="请输入"
            readOnly
            @focus="onFocus"
            @blur="onBlur"
            @input.native="onInput($event, addForm.verifyPassWord)"
            @mousedown.native="onMousedown"
            maxlength="16"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeAddDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          @click="addSubmit"
          v-preventReClick="1000"
          class="confirm-button"
          >确 定</el-button
        >
      </div>
  </div>
</template>

<script>
import { forgetPassword, getSmsCode, reqHasSmsCode } from "@/api/api";
import { validMobile, validatePass } from "@utils/validate";
import { mapState } from "vuex";
// import { reqResetPassword } from "../../../api/api-user";
import aes from "@/utils/asc"; //前端密码加密
export default {
  name: "reqUpdatePassword",
  computed: {
    ...mapState(["user"]),
  },
  data() {
    var checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.addForm.passWord) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      logoUrl1: require("@assets/images/logo1.png"),
      addForm: {
        mobile: "",
        passWord: "",
        verifyPassWord: "",
        smsCode: "",
      },
      // 表单验证规则
      rules: {
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            validator: validMobile,
          },
        ],
        smsCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
        passWord: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        verifyPassWord: [
          {
            required: true,
            message: "请再次输入新密码",
            trigger: "blur",
          },
          {
            validator: checkPass,
            trigger: "blur",
          },
        ],
      },
      showCountDown: true, //显示倒计时
      countDown: "", //倒计时一分钟
    };
  },
  mounted() {
    this.addForm.mobile = this.user.mobile;
  },
  methods: {
    // 获取焦点
    onFocus(event) {
      setTimeout(function () {
        event.target.readOnly = false;
      }, 100);
    },
    // 失去焦点
    onBlur(event) {
      event.target.readOnly = true;
    },
    // 防止内容删完时出现账号和密码
    onInput(event, val) {
      if (val.length === 0) {
        this.onBlur(event);
        this.onFocus(event);
      }
    },
    // 防止多次点击时出现账号和密码
    onMousedown(event) {
      this.onBlur(event);
      this.onFocus(event);
    },
    // 点击获取短信验证码
    async smsCodeClick() {
      if (!this.addForm.mobile)
        return this.$modal.notifyWarning("请输入手机号");
      if (this.addForm.mobile.length < 11)
        return this.$modal.notifyWarning("手机号码为11位数字");
      if (!this.showCountDown) return; //60s内只需发一次验证码
      // 验证手机号码是否存在
      // let res1 = await reqHasSmsCode({ mobile: this.addForm.mobile });
      // if (res1.code !== 20000) return this.$modal.notifyWarning(res.message);
      // if (res1.data.count == 0)
      //   return this.$modal.notifyWarning("手机号码不存在，请输入正确的手机号");
      // 发送验证码
      let res = await getSmsCode({
        mobile: this.addForm.mobile,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifyWarning("请注意查收手机短信验证码");
      this.showCountDown = false;
      this.countDown = 60;
      this.intervalId && clearInterval(this.intervalId);
      this.intervalId = setInterval(() => {
        if (this.countDown > 0 && this.countDown <= 60) {
          this.countDown--;
        } else {
          this.showCountDown = true;
          clearInterval(this.intervalId);
          this.intervalId = null;
        }
      }, 1000);
    },
    // 点击确定修改密码
    async addSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return;
        const res = await forgetPassword({
          mobile: this.addForm.mobile,
          smsCode: this.addForm.smsCode,
          passWord: this.addForm.passWord,
          verifyPassWord: this.addForm.verifyPassWord,
        });
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("密码修改成功，请重新登录");
        this.$refs.ruleForm.resetFields();
        sessionStorage.clear();
        setTimeout(() => {
          this.$router.push("/login");
          window.location.reload();
        }, 1000);
      });
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../views/common.less");

.img-style {
  width: 32px;
  height: 32px;
}

.code {
  position: absolute;
  width: 90px;
  height: 30px;
  line-height: 30px;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  color: #7367f0;
  cursor: pointer;

  // &:hover {
  //     // color: #556df4;
  //     color: #7978FA;
  // }
}

.login_type {
  font-size: 12px;
  color: #7978fa;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  .iconStyle {
    font-size: 40px;
    color: #50b674;
    margin: 6px 0;
    cursor: pointer;
  }
}
.dialog-footer {
  text-align: right;
}
</style>